<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游数字资产管理系统 - 数据统计</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
        .container { display: flex; min-height: 100vh; }
        .sidebar { width: 220px; background: rgba(255, 255, 255, 0.95); box-shadow: 2px 0 10px rgba(0,0,0,0.1); padding: 20px 0; }
        .logo { text-align: center; padding: 20px; font-size: 20px; font-weight: bold; color: #667eea; border-bottom: 2px solid #f0f0f0; margin-bottom: 20px; }
        .nav-menu { list-style: none; }
        .nav-item { padding: 15px 30px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; color: #333; }
        .nav-item:hover { background: #f5f5f5; border-left: 4px solid #667eea; padding-left: 26px; }
        .nav-item.active { background: #667eea; color: white; border-left: 4px solid #764ba2; }
        .nav-icon { margin-right: 10px; font-size: 18px; }
        .main-content { flex: 1; padding: 30px; overflow-y: auto; }
        .header { background: white; padding: 20px 30px; border-radius: 10px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header h1 { color: #333; font-size: 24px; }
        .chart-container { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .chart-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; }
        .chart-placeholder { height: 300px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #666; font-size: 16px; }
        .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="logo">⚔️ 梦幻资管系统</div>
            <ul class="nav-menu">
                <li class="nav-item" onclick="location.href='index.html'"><span class="nav-icon">🏠</span><span>首页仪表盘</span></li>
                <li class="nav-item" onclick="location.href='accounts.html'"><span class="nav-icon">👤</span><span>账号管理</span></li>
                <li class="nav-item" onclick="location.href='roles.html'"><span class="nav-icon">🎮</span><span>角色管理</span></li>
                <li class="nav-item" onclick="location.href='tasks.html'"><span class="nav-icon">📋</span><span>任务中心</span></li>
                <li class="nav-item"><span class="nav-icon">💰</span><span>资产管理</span></li>
                <li class="nav-item active"><span class="nav-icon">📊</span><span>数据统计</span></li>
                <li class="nav-item"><span class="nav-icon">⚙️</span><span>系统设置</span></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="header">
                <h1>📊 数据统计分析</h1>
            </div>
            
            <div class="stats-row">
                <div class="chart-container">
                    <div class="chart-title">📈 本周任务完成趋势</div>
                    <div class="chart-placeholder">折线图：显示每日任务完成率</div>
                </div>
                <div class="chart-container">
                    <div class="chart-title">🎯 任务完成分布</div>
                    <div class="chart-placeholder">饼图：各类任务完成占比</div>
                </div>
            </div>
            
            <div class="stats-row">
                <div class="chart-container">
                    <div class="chart-title">💰 本月收益统计</div>
                    <div class="chart-placeholder">柱状图：每日收益金额</div>
                </div>
                <div class="chart-container">
                    <div class="chart-title">🎮 角色活跃度排行</div>
                    <div class="chart-placeholder">横向柱状图：Top 10 活跃角色</div>
                </div>
            </div>
            
            <div class="chart-container">
                <div class="chart-title">📅 近30天任务完成热力图</div>
                <div class="chart-placeholder" style="height:200px;">热力图：展示每天每个角色的任务完成情况</div>
            </div>
        </div>
    </div>
</body>
</html>
